<template>
  <div>
    <div style="font-size: 50px; height: 90px;text-align: center;">
      湖南省社区矫正无感签到系统
    </div>
    <div style="position: relative">
      <div id="container" class="img" style="position: absolute; margin-left: 20px;">
        <el-image style="width: 350px;height: 350px;" :src="url1" fill>
          <!-- <div slot="error" style="height: 100%;width: 100%">
            <div class="image-slot"></div>
          </div> -->
        </el-image>
        <!-- <div style="font-size: 30px;height: 30px;">{{ time }} {{ result }}</div> -->
        <!-- <div style="font-size: 30px">{{ result }}</div> -->
      </div>
      <div id="table" style="position: absolute; margin-top: 420px;margin-left: 20px; ">
        <el-table :data="tableData" style="width: 350px;height: 350px;" :header-cell-style="{
          color: '#606266',
          fontSize: '14px',
          height: '30px'
        }" :cell-style="{
          color: '#606266',
          fontSize: '14px',
          height: '30px',
          padding: 0
        }" border color>
          <el-table-column prop="signInTime" label="时间" align="center" width="150px"></el-table-column>
          <el-table-column prop="userName" label="签到人员" align="center" width="80px"></el-table-column>
          <el-table-column prop="organ" label="所属机构" align="center" width="120px"></el-table-column>
        </el-table>
      </div>
      <div id="HikVideo" style="position: absolute; margin-left: 390px;">
        <video id="videoLive" controls autoplay autobuffer muted preload="auto" :style="{
          width: screenWidth - 430 + 'px',
          height: '760px',
          objectFit: 'fill'
        }"></video>
      </div>

      <!-- 连接状态：{{
          ws.readyState == 1
            ? "连接已断开"
            : ws.readyState == 0
            ? "正在尝试连接"
            : ws.readyState == 2
            ? "连接已关闭"
            : ws.readyState == 3
            ? "连接发生错误"
            : ""
        }} -->
      <div
        style="position: absolute; margin-top: 800px;max-height: 50px;  margin-left: 20px;padding-bottom:10px;font-size: 22px;text-align: left;width: 100%;">
        <p>{{ organ }} {{ ipAddress }} {{ webConn }}</p>

        <el-carousel height="60px" direction="vertical" motion-blur :autoplay="true">
          <el-carousel-item v-for="item in cameraStatus" :key="item">
            <p>设备状态：{{ item }}</p>
          </el-carousel-item>
        </el-carousel>


        <p>人脸签到状态：{{ result || errmsg }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLastLog,
  getLogs,
  getOnlineNum,
  startVideoLive,
  restartVideoLive
} from "../../api/system";

export default {
  name: "face",
  data() {
    return {



      num: 0,
      url: "",
      url1: "D:\\FaceImage\\SignIn\\20240908\\999999999999999990htz.jpg",
      baseUrl: "data:image/jpg;base64,",
      webSocket: "ws://localhost:8090/socket/local",
      ws: null,
      time: "",
      result: "",
      file: undefined,
      form: {},
      tableData: [],

      screenWidth: 0,
      screenHeight: 0,
      errmsg: "",
      timecount: 0,
      timer: null,//界面切换循环计时器
      timerqdsj: null,//签到界面切换循环计时器
      qdzflag: false,//签到中的界面标识
      qdjmip: "",//当前界面IP 用于签到界面与签到回调IP不一致时切换界面

      cameraStatus: [],
      ipAddress: "",
      organ: "",
      webConn: "",
      rtspUrl: []


    };
  },
  created() {
    this.updateWindowDimensions();
    window.addEventListener("resize", this.updateWindowDimensions);

    this.getLastLog();
    this.getLogs();

    let _this = this;
    //每分钟计时一次
    this.timer = setInterval(() => {
      _this.intime();
    }, 60000);
  },
  destroyed() {
    window.removeEventListener("resize", this.updateWindowDimensions);
  },
  methods: {
    cancelTimer() {
      if (timerqdsj) {
        clearInterval(timerqdsj);
      }
    },

    intime() {
      this.timecount++;
      console.log("time=", this.timecount);
      if (this.timecount && this.rtspUrl && this.rtspUrl.length > 0) {
        let pos = this.timecount % this.rtspUrl.length;
        restartVideoLive(this.ipAddress, this.rtspUrl[pos]);
      }
    },

    updateWindowDimensions() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    getLastLog() {
      getLastLog().then(response => {
        let temp = response.data;
        console.log("getLastLog=", temp);
        this.url = this.baseUrl + temp.img;
        this.time = temp.time;
        this.result = temp.msg;
      });
    },
    getLogs() {
      let this_ = this;
      getLogs().then(response => {
        this.tableData = [];
        // console.log(response.data);
        //显示前十条
        console.log("getLogs=", response.data);
        response.data.forEach(element => {
          if (this_.tableData.length < 10) {
            this_.tableData.push(element);
          }
        });
        // this.tableData = response.data;
      });
    },
    initWebsocket() {
      let that = this;
      getOnlineNum().then(response => {
        if (response.data && response.data.cameraStatus) {
          this.cameraStatus = response.data.cameraStatus;
        }

        if (response.data && response.data.organ) {
          this.organ = response.data.organ;
        }

        if (response.data && response.data.webConn) {
          this.webConn = response.data.webConn;
        }

        if (response.data && response.data.ipAddress) {
          this.ipAddress = response.data.ipAddress;
        }

        this.num = response.data.onlineNum;

        let pos = this.timecount % response.data.rtspUrl.length;
        console.log("pos=" + pos);
        this.rtspUrl = response.data.rtspUrl;
        startVideoLive(response.data.ipAddress, response.data.rtspUrl[pos]);
        // let ws
        console.log("initWebsocket=" + this.webSocket + this.num);
        this.ws = new WebSocket(this.webSocket + this.num);

        this.ws.onmessage = function (val) {
          let temp = JSON.parse(val.data);
          console.log(temp);

          if (temp.webConn) {
            that.webConn = temp.webConn;
          }

          if (temp.pause == true) {
            const video = document.getElementById("videoLive");
            video.pause();
            setTimeout(function () {
              video.play();
            }, 2000);
          } else if (temp.errmsg) {
            that.errmsg = temp.errmsg;
          } else if (temp.img && temp.time && temp.msg) {
            that.url = that.baseUrl + temp.img;
            that.time = temp.time;
            that.result = temp.msg;
            that.getLogs();
          }
        };
      });
    }
  },
  mounted() {
    this.initWebsocket();
  }
};
</script>

<style scoped>
.image-slot {
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
</style>
